<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>uploadVideo</title>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            background: #fff;
        }

        .tox {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-between;
            overflow: hidden;
            height: 400px;
            /*border: 1px red solid;*/

        }

        .tox .tox-form__group {
            box-sizing: border-box;
            margin-bottom: 4px;
        }


        .tox .tox-label, .tox .tox-toolbar-label {
            color: rgba(34, 47, 62, .7);
            display: block;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.3;
            padding: 0 8px 0 0;
            text-transform: none;
            white-space: nowrap;
        }

        .tox .tox-selectfield select, .tox .tox-textarea, .tox .tox-textfield, .tox .tox-toolbar-textfield {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: #fff;
            border-color: #ccc;
            border-radius: 3px;
            border-style: solid;
            border-width: 1px;
            box-shadow: none;
            box-sizing: border-box;
            color: #222f3e;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
            font-size: 16px;
            line-height: 24px;
            margin: 0;
            min-height: 34px;
            outline: 0;
            padding: 5px 4.75px;
            resize: none;
            width: 100%;
        }

        .tox .tox-dialog__body-content {
            box-sizing: border-box;
            display: flex;
            flex: 1;
            flex-direction: column;
            -ms-flex-preferred-size: auto;
            max-height: 550px;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            padding: 16px 16px;
        }


        .tox .tox-dialog__body-content > * {
            margin-bottom: 0;
            margin-top: 16px;
        }


        .tox .tox-dialog__body-content > * {
            margin-bottom: 0;
            margin-top: 16px;
        }

        .tox .tox-dialog__body-content > *:first-child {
            margin-top: 0;
        }

        .tox .tox-dialog__body-content > *:last-child {
            margin-bottom: 0;
        }

        .tox .tox-dialog__body-content > *:only-child {
            margin-bottom: 0;
            margin-top: 0;
        }

        .tox .tox-dialog__body-content a {
            color: #207ab7;
            cursor: pointer;
            text-decoration: none;
        }

        .tox .tox-dialog__body-content a:hover,
        .tox .tox-dialog__body-content a:focus {
            color: #185d8c;
            text-decoration: none;
        }

        .tox .tox-dialog__body-content a:active {
            color: #185d8c;
            text-decoration: none;
        }

        .tox .tox-dialog__body-content svg {
            fill: #222f3e;
        }

        .tox .tox-form__group--stretched {
            display: flex;
            flex: 1;
            flex-direction: column;
            -ms-flex-preferred-size: auto;
        }

        .tox .tox-form__group {
            box-sizing: border-box;
            margin-bottom: 4px;
        }

        .tox .tox-dropzone-container {
            display: flex;
            flex: 1;
        }

        element.style {
        }

        .tox .tox-dropzone {
            cursor: pointer;
            align-items: center;
            background: #fff;
            border: 2px dashed #ccc;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            justify-content: center;
            height: 150px;
            padding: 10px;
            overflow: hidden;
        }

        .tox .tox-button {
            background-color: #207ab7;
            background-image: none;
            background-position: 0 0;
            background-repeat: repeat;
            border-color: #207ab7;
            border-radius: 3px;
            border-style: solid;
            border-width: 1px;
            box-shadow: none;
            box-sizing: border-box;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: normal;
            line-height: 24px;
            margin: 0;
            outline: 0;
            padding: 4px 16px;
            text-align: center;
            text-decoration: none;
            text-transform: capitalize;
            white-space: nowrap;
        }

        .tox .tox-button[disabled] {
            background-color: #207ab7;
            background-image: none;
            border-color: #207ab7;
            box-shadow: none;
            color: rgba(255, 255, 255, 0.5);
            cursor: not-allowed;
        }

        .tox .tox-button:focus:not(:disabled) {
            background-color: #1c6ca1;
            background-image: none;
            border-color: #1c6ca1;
            box-shadow: none;
            color: #fff;
        }

        .tox .tox-button:hover:not(:disabled) {
            background-color: #1c6ca1;
            background-image: none;
            border-color: #1c6ca1;
            box-shadow: none;
            color: #fff;
        }

        .tox .tox-button:active:not(:disabled) {
            background-color: #185d8c;
            background-image: none;
            border-color: #185d8c;
            box-shadow: none;
            color: #fff;
        }

        .tox .tox-button--secondary {
            background-color: #f0f0f0;
            background-image: none;
            background-position: 0 0;
            background-repeat: repeat;
            border-color: #f0f0f0;
            border-radius: 3px;
            border-style: solid;
            border-width: 1px;
            box-shadow: none;
            color: #222f3e;
            outline: 0;
            padding: 4px 16px;
            text-decoration: none;
            text-transform: capitalize;
        }

        .tox .tox-button--secondary[disabled] {
            background-color: #f0f0f0;
            background-image: none;
            border-color: #f0f0f0;
            box-shadow: none;
            cursor: pointer;
            color: rgba(34, 47, 62, 0.5);
        }

        .tox .tox-button--secondary:focus:not(:disabled) {
            background-color: #e3e3e3;
            background-image: none;
            border-color: #e3e3e3;
            box-shadow: none;
            color: #222f3e;
        }

        .tox .tox-button--secondary:hover:not(:disabled) {
            background-color: #e3e3e3;
            background-image: none;
            border-color: #e3e3e3;
            box-shadow: none;
            color: #222f3e;
        }

        .tox .tox-button--secondary:active:not(:disabled) {
            background-color: #d6d6d6;
            background-image: none;
            border-color: #d6d6d6;
            box-shadow: none;
            color: #222f3e;
        }

        .tox .progress {
            height: 10px;
            width: 100%;
            border: 1px solid #1c6ca1;
            position: relative;
            border-radius: 5px;
            margin-top: 5px;
            display: block;
            display: none;
        }

        .tox .progress-item {
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: #1c6ca1;
            border-radius: 5px;
            /*transition: width .3s linear;*/
        }

        ::-webkit-scrollbar-track-piece {
            background: rgba(242, 242, 242, 1);
        }

        ::-webkit-scrollbar {
            width: 5px;
        }

        ::-webkit-scrollbar-thumb {
            background: #aaa;
            background-clip: padding-box;
        }

        #lock, #unlock {
            cursor: pointer;
            display: inline-block;
            border-radius: 2px;
            padding: 2px;
        }

        #unlock {
            display: none;
        }

        #lock:hover, #unlock:hover {
            background-color: #ccc;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="file_list" class="tox">
        <div role="tabpanel" class="tox-dialog__body-content" style="height: 420px; flex-basis: 210px;"
             aria-labelledby="aria_5965197812761603939544315">
            <div class="tox-form">
                <div class="tox-form__group">
                    <label class="tox-label" for="upFileUrlID">链接</label>
                    <div class="tox-form__controls-h-stack">
                        <div class="tox-control-wrap">
                            <input type="url" autocomplete="off" role="combobox"
                                   aria-autocomplete="list" aria-haspopup="true" tabindex="-1" data-alloy-tabstop="true"
                                   class="tox-textfield" aria-expanded="false" id="upFileUrlID">
                        </div>
                    </div>
                </div>
                <div class="tox-form__group">
                    <label class="tox-label" for="upFileTextID">显示文字</label>
                    <input type="text" tabindex="-1" autocomplete="off" data-alloy-tabstop="true" class="tox-textfield"
                           id="upFileTextID">
                </div>

                <div class="tox-form__group">
                    <label class="tox-label" for="sizeWidth" style="display: inline-block">宽</label>
                    <input type="number" min="1" tabindex="-1" autocomplete="off"
                           style="width: 40%;display: inline-block" data-alloy-tabstop="true" class="tox-textfield"
                           id="sizeWidth">
                    <label class="tox-label" for="sizeHeight" style="display: inline-block">高</label>
                    <input type="number" min="1" tabindex="-1" autocomplete="off"
                           style="width: 40%;display: inline-block" data-alloy-tabstop="true" class="tox-textfield"
                           id="sizeHeight">
                    <span id="lock"> <svg t="1617109364339" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                          xmlns="http://www.w3.org/2000/svg" p-id="7090" width="24" height="24"><path
                            d="M298.666667 426.666667V341.333333a213.333333 213.333333 0 1 1 426.666666 0v85.333334h42.666667a85.333333 85.333333 0 0 1 85.333333 85.333333v256a85.333333 85.333333 0 0 1-85.333333 85.333333H256a85.333333 85.333333 0 0 1-85.333333-85.333333v-256a85.333333 85.333333 0 0 1 85.333333-85.333333h42.666667z m213.333333-213.333334a128 128 0 0 0-128 128v85.333334h256V341.333333a128 128 0 0 0-128-128z"
                            fill="#000000" p-id="7091"></path></svg></span>
                    <span id="unlock"> <svg t="1617109480782" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="8834" width="24" height="24"><path
                            d="M987.428571 329.142857v146.285714c0 20.004571-16.566857 36.571429-36.571428 36.571429h-36.571429c-20.004571 0-36.571429-16.566857-36.571428-36.571429V329.142857c0-80.566857-65.718857-146.285714-146.285715-146.285714s-146.285714 65.718857-146.285714 146.285714v109.714286h54.857143a54.857143 54.857143 0 0 1 54.857143 54.857143v329.142857a54.857143 54.857143 0 0 1-54.857143 54.857143h-548.571429A54.857143 54.857143 0 0 1 36.571429 822.857143v-329.142857A54.857143 54.857143 0 0 1 91.428571 438.857143H475.428571V329.142857c0-141.129143 114.870857-256 256-256s256 114.870857 256 256z"
                            fill="" p-id="8835"></path></svg></span>
                </div>
                <div style="height: 10px;"></div>
                <div class="tox-form__group tox-form__group--stretched">
                    <div class="tox-dropzone-container">
                        <div class="tox-dropzone">
                            <p style="margin: 10px auto;color:rgba(34,47,62,.7)">拖放一段视频至此</p>
                            <button id="upfileID" type="button" onclick="getFile()" data-alloy-tabstop="true"
                                    tabindex="-1" class="tox-button tox-button--secondary"
                                    style="position: relative; min-height: 30px; overflow: visible;">浏览视频文件<input
                                    type="file" style="display: none;"></button>
                            <span><span class="progress-file" id="info"></span><span
                                    id="progress-file-per"></span></span>
                            <div class="progress" id="progress">
                                <div class="progress-item" id="progress-item"></div>
                            </div>

                        </div>

                    </div>
                </div>


            </div>
            <button title="上传文件" type="button" onclick="sendUpFile()"
                    style="width: 90%; margin: 4px auto 0px auto;letter-spacing: 2px; display: block;"
                    class="tox-button">
                <svg width="24" height="24" style="margin-top:5px;">
                    <path fill="#fff"
                          d="M19 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4v-2h4V8H5v10h4v2H5a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h14zm-8 9.4l-2.3 2.3a1 1 0 1 1-1.4-1.4l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L13 13.4V20a1 1 0 0 1-2 0v-6.6z"
                          fill-rule="nonzero"></path>
                </svg>
                <span style="top:-6px; position: relative; margin-left: 5px">开始上传</span>
            </button>
        </div>

    </div>
</div>
<script>
    var editor = parent.tinymce.activeEditor;
    var upfile = parent.upfile;
    var upload_handler = upfile.file_callback;
    var upfileData = null
    var upfileUrl = null
    var isLock = true;
    var widthHeightPer = 3 / 2;
    var sizeWidthStr = ''
    var sizeHeightStr = ''
    upfile.res = {};
    var sizeWidthFocus = 0;
    var sizeHeightFocus = 0;
    var isCalPer = false;

    let inputUrl = document.getElementById('upFileUrlID');
    let inputText = document.getElementById('upFileTextID');

    let sizeWidth = document.getElementById('sizeWidth');
    let sizeHeight = document.getElementById('sizeHeight');

    let progress = document.getElementById('progress');

    let unlock = document.getElementById('unlock');
    let lock = document.getElementById('lock');

    let progressItem = document.getElementById('progress-item');
    let progressFilePer = document.getElementById('progress-file-per');

    function addFile(file) {
        if (file === undefined || file === null)
            return false;
        upfileData = file;
        var name = upfileData.name
        var len = getWordsCnt(name);
        if (len > 38) {
            name = substr(name, 0, 38) + "...";

        }
        document.getElementById('info').innerText = name;
        progressItem.style.transition = 'none';
        progressFilePer.innerText = '(0%)'
        progressItem.style.width = "0%";

    }

    lock.onclick = function () {
        isLock = false;
        lock.style.display = 'none';
        unlock.style.display = 'inline-block';
    }

    unlock.onclick = function () {
        isLock = true;
        unlock.style.display = 'none';
        lock.style.display = 'inline-block';
    }

    inputUrl.oninput = function () {
        upfile.res.url = inputUrl.value;
    }
    inputText.oninput = function () {
        upfile.res.text = inputText.value;
    }
    sizeWidth.oninput = function () {
        sizeWidthStr = sizeWidth.value;
        if (isCalPer) {
            sizeHeightStr = (parseInt(sizeWidthStr) / widthHeightPer).toFixed(2);
            sizeHeight.value = sizeHeightStr
        }
        upfile.res.sizeWidth = sizeWidthStr;
        upfile.res.sizeHeight = sizeHeightStr;

    }
    sizeHeight.oninput = function () {
        sizeHeightStr = sizeHeight.value;
        if (isCalPer) {
            sizeWidthStr = parseInt(sizeHeightStr) * widthHeightPer;
            sizeWidth.value = sizeWidthStr
        }
        upfile.res.sizeWidth = sizeWidthStr;
        upfile.res.sizeHeight = sizeHeightStr;
    }
    sizeWidth.onfocus = function () {
        sizeWidthFocus++;
        if (!isCalPer && sizeHeightStr !== '' && sizeWidthStr !== '') {
            widthHeightPer = parseInt(sizeWidthStr) / parseInt(sizeHeightStr);
            isCalPer = true;
            // console.log(widthHeightPer)
        }
    }
    sizeHeight.onfocus = function () {
        sizeHeightFocus++;
        if (!isCalPer && sizeHeightStr !== '' && sizeWidthStr !== '') {
            widthHeightPer = parseInt(sizeWidthStr) / parseInt(sizeHeightStr);
            isCalPer = true;
            // console.log(widthHeightPer)
        }
    }

    function getWordsCnt(str) {
        var n = 0;
        for (var i = 0; i < str.length; i++) {
            var ch = str.charCodeAt(i);
            if (ch > 255) { // 中文字符集
                n += 2;
            } else {
                n++;
            }
        }
        return n;
    }

    function substr(str, start, len) {
        var l = str.length, i = 0, n = 0;
        var substr = "";
        while (n < len && i < l) {
            var ch = str.charCodeAt(i);
            if (ch > 255) {
                n++;
            }
            substr += str.charAt(i);
            i++;
            n++;
        }
        return substr;

    }

    function sendUpFile() {
        if (upfileData === undefined || upfileData === null)
            return false;
        progress.style.display = 'block'
        progressItem.style.transition = 'width .3s linear';
        var name = upfileData.name;
        var len = getWordsCnt(name);
        if (len > 10) {
            name = substr(name, 0, 10) + '...'
        }
        upload_handler(upfileData, function (url, text, media) {
            var numRex = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/;

            var defaultWidth = 320;
            var defaultHeight = 240;
            if (media !== undefined && media.videoInfo !== undefined) {
                defaultWidth = media.videoInfo.width;
                defaultHeight = media.videoInfo.height;

            }

            inputUrl.value = url;
            if (inputText.value.trim() === '' && text) {
                inputText.value = text;
            }
            var sw = sizeWidth.value.trim();
            var sh = sizeHeight.value.trim();
            if (((sw === '' || !numRex.test(sw) || Number(sw) <= 0) && defaultWidth)
                || ((sh === '' || !numRex.test(sh) || Number(sh) <= 0) && defaultHeight)) {
                sizeWidth.value = defaultWidth;
                sizeHeight.value = defaultHeight;
                sizeWidthStr = defaultWidth;
                sizeHeightStr = defaultHeight;
                isCalPer = true;
                widthHeightPer = parseInt(sizeWidthStr) / parseInt(sizeHeightStr);

            }


            var file = {
                url: url,
                text: inputText.value,
                sizeWidth: sizeWidthStr,
                sizeHeight: sizeHeightStr,
                text: inputText.value,
                filename: upfileData.name,
                size: upfileData.size
            }
            upfile.res = file
            upfileData.isUpload = true;
            progressFilePer.innerText = '(100%)'
            progressItem.style.width = "100%";


        }, function (percent) {

            if (percent >= 100) percent = 99;
            if (upfileData.isUpload) percent = 100
            progressItem.style.width = percent + "%";
            progressFilePer.innerText = '(' + percent + '%)'
        })
    }


    //拖拽添加
    document.addEventListener('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
    }, false);
    document.addEventListener("dragleave", function (e) {
        e.preventDefault();
        e.stopPropagation();
    }, false);
    document.addEventListener('drop', function (e) {
        e.stopPropagation();
        e.preventDefault();
        if (!e.dataTransfer.files) {
            return false;
        }
        var dropFile = null;

        if (!(e.dataTransfer.files.length > 0)) {
            return false;
        }
        let videoExt = ['ogm', 'flv', 'wmv', 'mpg', 'webm', 'ogv', 'asx', 'mpeg', 'mp4', 'avi', 'amv', 'rmvb', 'mov', 'mtv', 'wmv', '3gp', 'amv']
        for (let i = 0; i < e.dataTransfer.files.length; i++) {
            var filename = e.dataTransfer.files[i].name;
            var t = filename.lastIndexOf(".");
            if (t === -1) continue;
            var ext = filename.substr(t + 1).toLowerCase();
            if (videoExt.indexOf(ext) !== -1) {
                dropFile = e.dataTransfer.files[i];
                break;
            }

        }
        addFile(dropFile);
    });

    var global$1 = upfile.tinymce.util.Tools.resolve('tinymce.util.Promise');
    var global$2 = upfile.tinymce.util.Tools.resolve('tinymce.Env');
    var global$3 = upfile.tinymce.util.Tools.resolve('tinymce.util.Delay');
    var pickFile = function (a) {
        return new global$1(function (e) {
            var c = document.createElement("input");
            c.type = "file";
            c.accept = "video/*,.rmvb,.amv,.mov,.mtv,.wmv,.3gp,.amv,.flv";
            c.style.position = "fixed";
            c.style.left = "0";
            c.style.top = "0";
            c.style.opacity = "0.001";
            document.body.appendChild(c);
            var b = function (f) {
                e(Array.prototype.slice.call(f.target.files))
            };
            c.addEventListener("change", b);
            var d = function (g) {
                var f = function () {
                    e([]);
                    c.parentNode.removeChild(c)
                };
                if (global$2.os.isAndroid() && g.type !== "remove") {
                    global$3.setEditorTimeout(a, f, 0)
                } else {
                    f()
                }
                a.off("focusin remove", d)
            };
            a.on("focusin remove", d);
            c.click()
        })
    };

    function getFile() {

        pickFile(editor).then(function (files) {
            addFile(files[0]);
        })
    }
</script>
</body>
</html>